<template>
	<view class="content">
		<image class="logo" src="/static/logo.png" />
		<view class="text-area">
			<text class="title">{{ title }}</text>
		</view>
		<!-- <up-cell-group title-bg-color="rgb(243, 244, 246)">
			<up-cell :titleStyle="{fontWeight: 500}" :title="item.title" v-for="(item, index) in list" :key="index"
				isLink :icon="item.iconUrl" @click="showToast(item)">
			</up-cell>
		</up-cell-group> -->
	</view>
		<up-toast ref="uToastRef"></up-toast>
</template>

<script setup lang="ts">
	import { getList } from "@/api/user"
	import { useUserStore } from "@/store/index"
	import { ref, onMounted, computed } from 'vue'

	const userStore : any = useUserStore();
	userStore.nickNameChange();
	const title = ref('Hello');

	getList().then(res => {
		console.log(res.rows);
	})
	// console.log(uni.$u.config.v);

	// 创建响应式数据  
	const show = ref(false);
	const list = ref([
		{
			type: 'default',
			title: '默认主题',
			message: "锦瑟无端五十弦",
			iconUrl: 'https://uview-plus.jiangruyi.com/resources/toast/default.png'
		},
		{
			type: 'error',
			icon: false,
			title: '失败主题',
			message: "一弦一柱思华年",
			iconUrl: 'https://uview-plus.jiangruyi.com/resources/toast/error.png'
		},
		{
			type: 'success',
			title: '成功主题(带图标)',
			message: "庄生晓梦迷蝴蝶",
			iconUrl: 'https://uview-plus.jiangruyi.com/resources/toast/success.png'
		},
		{
			type: 'loading',
			title: '正在加载',
			message: "正在加载",
			iconUrl: 'https://uview-plus.jiangruyi.com/resources/toast/loading.png'
		},
		{
			type: 'default',
			title: '结束后跳转标签页',
			message: "此情可待成追忆",
			url: '/pages/componentsB/tag/tag',
			iconUrl: 'https://uview-plus.jiangruyi.com/resources/toast/jump.png'
		}
	]);

	// 方法
	const uToastRef : any = ref(null)
	function showToast(params : any) {
		uToastRef.value.show({
			...params,
			complete() {
				params.url && uni.navigateTo({
					url: params.url
				});
			}
		});
	}
	
	onMounted(() => {
		setTimeout(() => {
			showToast(list.value[1])
		},2000)
	})

</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.u-page {
		padding: 0;
	}

	.u-cell-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 8rpx;
	}

	.u-cell-group__title__text {
		font-weight: bold;
	}
</style>